<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150" height="150">test canvas...</canvas>
    <script>
        // 创建一个6x6方格的色板
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            for(let i = 0; i < 6; i++) {
                for(let j = 0; j < 6; j++) {
                    ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
                    ctx.fillRect(i * 25, j * 25, 25, 25);
                }
            }
        }
    </script>
</body>
</html>